import Maincontainer from "@/components/maincontainer";
import {defineComponent, ref, computed, inject,} from "vue"
import {
    NTree,
    TreeOption,
    NButton,
    NButtonGroup,
    NIcon,
    NInputGroup,
    NInput,
    NCard,
    NSpace,
    NPopover,
    NSlider,
    NDropdown,
    DropdownOption,
    NDivider,
} from "naive-ui"
import {
    ArrowLeftOutlined,
    ArrowRightOutlined,
    ArrowUpOutlined,
    SearchOutlined,
    FolderFilled,
    UploadOutlined,
    UnorderedListOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    SwapOutlined,
    CheckOutlined,
    EllipsisOutlined,
    DoubleLeftOutlined,
    DoubleRightOutlined,
    AppstoreFilled,
    OrderedListOutlined,
} from "@vicons/antd"
import {SearchPlus} from "@vicons/fa"
import {FileUploadSharp} from "@vicons/material"
import Mytree from "@/components/mytree";
import Pingpu from "./pingpu"
import Liebiao from "./liebiao"
import Mypage from "@/components/mypage/index"

export default defineComponent({
    name: "filemanager",
    setup() {
        // 接收注入的函数
        const showOrCreatefile = inject("showOrCreatefile")
        // 左侧边栏的展开状态
        const expand = ref(true)
        // 左侧边栏的宽度
        const expandWidth = ref(200)
        const expandWidthnow = computed(() => {
            return expand.value ? expandWidth.value : 5
        })
        const changeexpand = () => {
            expand.value = !expand.value
        }
        // 左侧树状数据
        const treeData = ref([
            {
                label: "我的电脑", value: "all", extend: false, children: [
                    {label: "C盘", value: "c", extend: false},
                    {label: "D盘", value: "d", extend: false},
                    {label: "E盘", value: "e", extend: false},
                    {label: "F盘", value: "f", extend: false},
                ],
            },
            {
                label: "我的电脑", value: "all", extend: false, children: [
                    {label: "C盘", value: "c", extend: false},
                    {label: "D盘", value: "d", extend: false},
                    {label: "E盘", value: "e", extend: false},
                    {label: "F盘", value: "f", extend: false},
                ],
            },
            {
                label: "我的电脑", value: "all", extend: false, children: [
                    {label: "C盘", value: "c", extend: false},
                    {label: "D盘", value: "d", extend: false},
                    {label: "E盘", value: "e", extend: false},
                    {label: "F盘", value: "f", extend: false},
                ],
            },
        ])
        const caozuo = (e: MouseEvent, row: any) => {
            e.preventDefault();
            e.stopPropagation();
            console.log(row.label, "当前点击的东西");
        }
        const caozuooptions = ref([
            {label: "刷新目录", key: "refush"},
            {label: "新建文件夹", key: "createfolder"},
            {label: "下载", key: "download"},
            {label: "分享", key: "share"},
            {label: "复制", key: "copy"},
            {label: "剪切", key: "shear"},
            {label: "重命名", key: "rename"},
            {label: "删除", key: "delete"},
            {label: "搜索", key: "search"},
            {label: "设置标签", key: "settag"},
            {label: "属性", key: "attribute"},
        ])
        const handleSelect = (key: string) => {
            console.log("点击的key:", key);
        }
        const rightslot = (item1: any) => <NDropdown trigger={"click"} options={caozuooptions.value}
                                                     onSelect={handleSelect} placement={"right-end"}><NIcon size={16}
                                                                                                            class="absolute top-0 right-1 bottom-0 h-30px juzhong1"
                                                                                                            onClick={(e: MouseEvent) => caozuo(e, item1)}>
            <EllipsisOutlined class="hover:text-blue-400 cursor-pointer"/>
        </NIcon></NDropdown>
        // 点击某个选项
        const clickItem = (item: any) => {
            console.log("这里是父组件，点击的数据是", item.label);
        }
        // 拖动函数
        const tuodong = (e: MouseEvent) => {
            console.log("开始监听拖动")
            let start = e.clientX   // 固定开始的位置
            console.log("start", start)
            document.onmousemove = (newe) => {
                let end = newe.clientX  // 现在结束的位置
                expandWidth.value = expandWidth.value + (end - start)
                start = newe.clientX
                if (expandWidth.value < 100) {
                    expandWidth.value = 100
                } else if (expandWidth.value > 300) {
                    expandWidth.value = 300
                }
                console.log("end", start - end, 200 - expandWidth.value)
            }
            document.onmouseup = () => {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }

        // 中间主体区域
        const path = ref("")
        // 属性信息是否展示
        const showfileinfo = ref(false)
        const changeshowfileinfo = () => {
            showfileinfo.value = !showfileinfo.value
        }
        // 图标大小
        const iconSize = ref(50)
        // 排序选项列表
        const orderlist1 = ref([
            {label: "名称", value: "name", selected: true},
            {label: "类型", value: "type", selected: false},
            {label: "大小", value: "size", selected: false},
            {label: "修改时间", value: "time", selected: false},
        ])
        const orderlist2 = ref([
            {label: "递增", value: "up", selected: true},
            {label: "递减", value: "down", selected: false},
        ])
        const checkitem1 = (row: any) => {
            orderlist1.value.forEach(item => {
                item.selected = item.value === row.value
            })
        }
        const checkitem2 = (row: any) => {
            orderlist2.value.forEach(item => {
                item.selected = item.value === row.value
            })
        }
        // 文件列表
        const fileList = ref<Array<{ [key: string]: any }>>([])
        const total = ref(0)
        const getTableData = (page: number, pageSize: number) => {

        }
        // 选中的文件数量
        const selectNum=computed(()=>{
            return fileList.value.filter(item=>item.selected).length
        })
        // 分页插槽
        const msg = (page:number,pageSize:number)=>(<span>共{total.value}个文件  { selectNum.value > 0 ? <span class="ml-10px text-blue-400">当前选中{selectNum.value}个</span> : null}</span>)
        // 最后选中的文件
        const selectid = ref("")
        // 文件排列方式
        const ordertype = ref<"liebiao" | "pingpu">("pingpu")
        const changeordertype = (type: "liebiao" | "pingpu") => {
            ordertype.value = type
        }
        // 选中文件操作
        const selectFileList = (filearray: Array<string>) => {
            console.log("收到单击选中", filearray)
            fileList.value.forEach(item => {
                item.selected = filearray.includes(item.id);
            })
            if (filearray.length === 1) {
                selectid.value = filearray[0]
            }
        }
        // 双击文件
        const shuangji = (filearray: Array<string>) => {
            console.log("双击的文件是：", filearray)
            selectid.value = filearray[0]
        }
        // 右键点击方法
        const youjianClick=(key:string)=>{
            switch(key){
                case "open":
                    const file = fileList.value.find(el=>el.selected)
                    showOrCreatefile && showOrCreatefile(file.id)
                    break
            }
        }
        // 初始化区域
        const init = () => {
            for (let i = 0; i < 100; i++) {
                fileList.value.push({
                    id: `id${i}`,
                    name: `文件文件文件文件文件文件文件文件文件文件文件文件文件文件${i}`,
                    url: "http://101.43.194.47:88/static/images/file_icon/icon_file/md.png",
                },)
            }
        }
        init()
        return () => <Maincontainer>
            <div class="absolute top-0 left-0 bottom-0 z-10" style={{"width": `${expandWidthnow.value}px`}}>
                <Mytree treeData={treeData.value} onChange={clickItem} v-slots={{rightslot: rightslot}} textleft={12}/>
            </div>
            <div
                class="group absolute top-0 bottom-0 w-5px z-20 border-r border-gray-400 bg-white bg-opacity-0 cursor-e hover:(border-l border-blue-400)"
                style={{"left": `${expandWidthnow.value - 5}px`}} onMousedown={tuodong}>
                <div
                    class="w-30px h-30px absolute top-100px -left-13px border border-blue-400 rounded-full invisible juzhong1 cursor-pointer bg-white group-hover:(visible text-blue-400) hover:text-red-400"
                    onClick={changeexpand}>
                    <NIcon size={16}>
                        {!expand.value ? <DoubleRightOutlined/> : <DoubleLeftOutlined/>}
                    </NIcon>
                </div>
            </div>
            <div class="absolute top-0 bottom-0 right-0 z-10"
                 style={{"left": `${expandWidthnow.value}px`}}>
                <NCard class="absolute top-0 left-0 right-0 h-10" content-style={{
                    paddingLeft: "15px",
                    paddingRight: "15px",
                    paddingTop: "5px",
                    paddingBottom: "5px",
                    display: "flex",
                    "justify-content": "space-between",
                    "align-items": "flex-start",
                }}>
                    <NButtonGroup size={"small"}>
                        <NButton title="后退" v-slots={{
                            icon: () => <NIcon size={16}>
                                <ArrowLeftOutlined/>
                            </NIcon>
                        }}/>
                        <NButton title="前进" v-slots={{
                            icon: () => <NIcon size={16}>
                                <ArrowRightOutlined/>
                            </NIcon>
                        }}/>
                    </NButtonGroup>
                    <NInputGroup class="max-w-600px">
                        <NButton title="上级目录" size={"small"} v-slots={{
                            icon: () => <NIcon size={16}>
                                <ArrowUpOutlined/>
                            </NIcon>
                        }}/>
                        <NInput size={"small"} value={path.value}/>
                    </NInputGroup>
                    <NInputGroup class="max-w-200px">
                        <NInput size={"small"} value={path.value}/>
                        <NButton title="搜索" size={"small"} v-slots={{
                            icon: () => <NIcon size={16}>
                                <SearchOutlined/>
                            </NIcon>
                        }}/>
                    </NInputGroup>
                </NCard>
                <NCard class="absolute top-10 left-0 right-0 h-9" content-style={{
                    paddingLeft: "15px",
                    paddingRight: "15px",
                    paddingTop: "2px",
                    paddingBottom: "2px",
                    display: "flex",
                    "justify-content": "space-between",
                    "align-items": "flex-start",
                }}>
                    <NSpace>
                        <NButton size={"small"} v-slots={{
                            icon: () => <NIcon size={16} color={"#fbb612"}>
                                <FolderFilled/>
                            </NIcon>
                        }}>
                            新建文件夹
                        </NButton>
                        <NButton size={"small"} v-slots={{
                            icon: () => <NIcon size={16} color={"#2474b5"}>
                                <FileUploadSharp/>
                            </NIcon>
                        }}>
                            上传文件
                        </NButton>
                    </NSpace>
                    <NSpace>
                        <NButtonGroup size={"small"}>
                            <NPopover trigger={"click"} v-slots={{
                                trigger: () => <NButton size={"small"} title="图标大小" v-slots={{
                                    icon: () => <NIcon size={16}>
                                        <SearchPlus/>
                                    </NIcon>
                                }}/>
                            }}>
                                <span>图标大小</span>
                                <NSlider class="w-220px h-20px" v-model={[iconSize.value, "value"]} min={40} max={200}/>
                            </NPopover>
                            <NPopover trigger={"click"} v-slots={{
                                trigger: () => <NButton title="排序方式" v-slots={{
                                    icon: () => <NIcon size={16}>
                                        <SwapOutlined class="transform rotate-90"/>
                                    </NIcon>
                                }}/>
                            }}>
                                {orderlist1.value.map(item => {
                                    return <div
                                        class="w-200px h-30px flex items-center px-2 cursor-pointer hover:(bg-blue-200 text-blue-500)"
                                        onClick={() => checkitem1(item)}>
                                        <NIcon size={16} color={"#2474b5"}>
                                            {item.selected ? <CheckOutlined/> : null}
                                        </NIcon>
                                        <span class="truncate">{item.label}</span>
                                    </div>
                                })}
                                <NDivider style={"margin:5px"}/>
                                {orderlist2.value.map(item => {
                                    return <div
                                        class="w-200px h-30px flex items-center px-2 cursor-pointer hover:(bg-blue-200 text-blue-500)"
                                        onClick={() => checkitem2(item)}>
                                        <NIcon color={"#2474b5"} size={16}>
                                            {item.selected ? <CheckOutlined/> : null}
                                        </NIcon>
                                        <span class="truncate">{item.label}</span>
                                    </div>
                                })}
                            </NPopover>

                            <NButton title="图标排列" type={ordertype.value === "pingpu" ? "primary" : "default"}
                                     onClick={() => changeordertype("pingpu")}
                                     type={showfileinfo.value ? "primary" : "default"} size={"small"}
                                     v-slots={{
                                         icon: () => <NIcon size={16}>
                                             <AppstoreFilled/>
                                         </NIcon>
                                     }}/>

                            <NButton title="列表排列" type={ordertype.value === "liebiao" ? "primary" : "default"}
                                     onClick={() => changeordertype("liebiao")}
                                     type={showfileinfo.value ? "primary" : "default"} size={"small"}
                                     v-slots={{
                                         icon: () => <NIcon size={16}>
                                             <OrderedListOutlined/>
                                         </NIcon>
                                     }}/>

                        </NButtonGroup>
                        <NButton title="属性信息" onClick={changeshowfileinfo}
                                 type={showfileinfo.value ? "primary" : "default"} size={"small"} v-slots={{
                            icon: () => <NIcon size={16}>{showfileinfo.value ? <MenuUnfoldOutlined/> :
                                <MenuFoldOutlined/>}</NIcon>
                        }}/>
                    </NSpace>
                </NCard>
                <NCard class="absolute top-19 left-0 right-0 bottom-10" content-style={{
                    padding: "5px",
                    overflow: "hidden",
                }}>
                    {ordertype.value === "liebiao" ?
                        <Liebiao fileList={fileList.value} size={iconSize} onSelect={selectFileList}
                                 onDbclick={shuangji} selectid={selectid}/> : ordertype.value === "pingpu" ?
                            <Pingpu fileList={fileList.value} size={iconSize} onSelect={selectFileList}
                                    selectid={selectid} onDbclick={shuangji} onSelectkey={youjianClick}/> : null}
                </NCard>
                <NCard class="absolute left-0 right-0 bottom-0 h-10" content-style={{
                    padding: "5px",
                    display: "flex",
                    "-webkit-box-pack": "justify",
                    "-ms-flex-pack": "justify",
                    "-webkit-justify-content": "space-between",
                    "justify-content": "space-between",
                    "-webkit-box-align": "start",
                    "-ms-flex-align": "start",
                    "-webkit-align-items": "flex-start",
                    "align-items": "flex-start",
                }}>
                    <Mypage total={total.value} onGet={getTableData} pageSize={100}
                            pageSizeList={[100, 200, 300, 400, 500, 800, 1000]} v-slots={{msg: msg}} />
                </NCard>
            </div>
        </Maincontainer>
    },
})
